<template>
  <div id="main" class="map" ></div>
</template>

<script>
import * as echarts from 'echarts';
import chinaMap from '@/assets/china.json';
import request from "@/util/request.js";

export default {
  data() {
    return {
      timer: '',
      chart: null,
      provinceData: [],
      mapOption: {
        title: {
          text: '信息工程学院学生籍贯分布',
          left: 'center'
        },
        visualMap: {
          left: 'top',
          max: 2000,
          min: 1,
          inRange: {
            color: ['#e0ffff', '#006edd']
          },
          text: ['High', 'Low'],
          calculable: true
        },
        series: [
          {
            id: 'population',
            type: 'map',
            roam: false,
            map: 'China',
            animationDurationUpdate: 1000,
            universalTransition: true,
            data: []
          }
        ]
      },
      barOption: {
        title: {
          text: '信息工程学院学生籍贯分布',
          left: 'center'
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            rotate: 30
          },
          data: []
        },
        grid: {},
        animationDurationUpdate: 1000,
        series: [{
          type: 'bar',
          id: 'population',
          data: [],
          itemStyle: {
            color: '#006edd'
          },
          universalTransition: true
        }]
      },
      currentOption: null,
    };
  },
  mounted() {
    this.getCount()
    this.chart = echarts.init(document.getElementById('main'));
    this.chart.showLoading();
    echarts.registerMap('China', chinaMap);
    this.chart.hideLoading();

    this.mapOption.series[0].data = this.provinceData;
    this.barOption.yAxis.data = this.provinceData.map(item => item.name);
    this.barOption.series[0].data = this.provinceData.map(item => item.value);

    this.currentOption = this.mapOption;
    this.chart.setOption(this.mapOption);

    this.timer = setInterval(() => {
      this.mapOption.series[0].data = this.provinceData;
      this.barOption.yAxis.data = this.provinceData.map(item => item.name);
      this.barOption.series[0].data = this.provinceData.map(item => item.value);
      this.currentOption = this.currentOption === this.mapOption ? this.barOption : this.mapOption;
      this.chart.setOption(this.currentOption, true);
      // 更新柱状图数据
      if (this.currentOption === this.barOption) {
        this.chart.setOption({series: [{data: this.provinceData.map(item => item.value)}]});
      }
    }, 5000);
  },
  beforeUnmount() {
    clearTimeout(this.timer);
  },
  methods:{
    getCount(){
      request.get("/info_account/getProvinceCount").then(res=>{
        this.provinceData.push(...res.data.data)
      })
    }
  }
};
</script>

<style scoped>
.map{
  width: 100%;
  height: 550px;
}
@media screen and (max-width: 1024px) {
  #main {
    height: 80vw;
    width: 100%;
  }
}

</style>
